import { ThemeSetting } from '@/components/ThemeSetting';
import { Button, Space } from 'antd';
import { useState } from 'react';

import { ReactComponent as ThemeIcon } from '@/assets/images/icon-theme.svg';
import { ThemeSettingMap } from '@/configs/theme';
import { useDispatch, useSelector } from 'react-redux';
import { AppLogo } from './AppLogo';
import { AppMenu } from './AppMenu';
import {
  HeaderBodyLayout,
  HeaderFootLayout,
  HeaderHeadLayout,
  HeaderLayout,
} from './AppStyle';

interface Props {
  isHome?: boolean;
  style?: React.CSSProperties;
}

export const AppHeader: React.FC<Props> = (props) => {
  const { isHome, style } = props;
  // 获取redux派发钩子
  const dispatch = useDispatch();

  // 获取store中的主题配置
  const globalTheme = useSelector((state: any) => state?.theme);

  // 是否显示主题色选择对话框
  const [showThemeModal, setShowThemeModal] = useState(false);

  return (
    <>
      <HeaderLayout style={{ ...style }}>
        <HeaderHeadLayout>
          <AppLogo />
        </HeaderHeadLayout>
        <HeaderBodyLayout>
          <AppMenu isHome={isHome} />
        </HeaderBodyLayout>
        <HeaderFootLayout>
          <Space>
            {
              // 当globalConfig配置了主题色，并且数量大于0时，才显示主题色换肤按钮
              ThemeSettingMap.colorPrimary.data.length > 0 && (
                <Button
                  icon={
                    <ThemeIcon
                      style={{
                        fill:
                          globalTheme?.navTheme === 'dark' ? '#fff' : '#415fff',
                      }}
                    />
                  }
                  shape="circle"
                  onClick={() => {
                    setShowThemeModal(true);
                  }}
                />
              )
            }
          </Space>
        </HeaderFootLayout>
      </HeaderLayout>
      {
        // 显示主题色换肤对话框
        showThemeModal && (
          <ThemeSetting
            onClose={() => {
              setShowThemeModal(false);
            }}
          />
        )
      }
    </>
  );
};
